.@{prefix}-project-config-container {
  &-header {
    display: flex;
    align-items: center;
    &-reset {
      margin: 0 10px;
      cursor: pointer;
    }
    &-title {
      position: relative;
      margin-right: 20px;
      padding-left: 8px;
      &:before {
        content: '';
        position: absolute;
        left: 0;
        width: 4px;
        height: 100%;
        background-color: @primary-color;
      }
    }
  }
  &-body {
    height: calc(100vh - 200px);
    padding: 10px;
    display: flex;
    &-tabs { // 标签区域
      width: 8%;
      min-width: 200px;
      padding: 8px;
      &-active {
        position: relative;
        background-color: @background-second-color;
        &:before {
          content: '';
          position: absolute;
          width: 3px;
          height: 55%;
          left: 3px;
          top: 25%;
          background-color: @primary-color;
        }
      }
      &-item {
        margin: 10px 0;
        padding: 8px;
        cursor: pointer;
      }
    }
    &-display { // 展示区域
      flex-grow: 1;
      padding: 8px;
      border-left: 1px solid @primary-border-color;
      &-default-field,
      &-field-setting,
      &-header-setting,
      &-sheet-setting {
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      &-default-field { // 新建表预设字段样式
        &-tip {
          padding: 10px 0;
          font-size: 12px;
          color: @second-font-color;
        }
        &-fields {
          flex-grow: 1;
        }
      }
      &-sheet-setting,
      &-header-setting,
      &-field-setting { // 表头显示设置(字段) / 增强属性设置（数据表 / 字段）样式
        &-tips {
          padding: 10px 0;
          font-size: 12px;
          color: @second-font-color;
        }
        &-table {
          flex-grow: 1;
        }
      }
      &-sheet-setting,
      &-field-setting {
        &-datasource {
          width: 100%;
          height: 600px;
          margin-bottom: 10px;
          & > div {
            &:first-child {
              width: 100%;
            }
            &:last-child {
              overflow: hidden;
              padding: 5px 0;
            }
          }
          &-url {
            float: left;
            cursor: pointer;
            color: @primary-color;
          }
          &-title {
            position: relative;
            display: inline-flex;
            &-example {
              position: absolute;
              top: 21px;
              width: 300px;
              height: 300px;
              box-shadow: 0 0 10px @background-third-color;
              z-index: 99;
              border-radius: 5px;
              padding: 5px;
              display: none;
              background-color: @background-third-color;
              & > div {
                width: 100%;
                height: 100%;
              }
              &-display {
                display: block;
              }
            }
            & > div {
              &:last-child {
                margin-left: 10px;
                & > span {
                  color: @primary-color;
                }
              }
            }
          }
        }
      }
      &-header-setting {
        &-table {
          overflow: scroll;
          display: flex;
          flex-direction: column;
          &-opt {
            width: 200px;
          }
        }
      }
    }
  }
}
